/*
 * @Author: shawnxiao
 * @Date: 2021-12-08 14:10:54
 * @LastEditTime: 2021-12-08 14:22:27
 * @FilePath: /vite-vue3-ts/src/views/Tsx/components/Child.tsx
 */
import {CSSProperties,FunctionalComponent} from 'vue'
interface Props{
  count:number;
  style: CSSProperties
}
type Emit = {
  childClick: () => void;
}

const Child:FunctionalComponent<Props,Emit> = (props: { [x: string]: any; count?: any; },ctx: { slots: any; emit: any; }) => {
  const {count,...rest} = props;
  const {slots,emit} = ctx;

  return(
    <div {...rest}>
      <h1>this is child</h1>
      {slots?.header && slots.header()}
      <button onClick={() => emit('childClick')}>child count++</button>
      <p>child count is: {count}</p>
      {slots?.default && slots.default()}
      <p>props keys: {Object.keys(props).join()}</p>
    </div>
  )
}

export default Child;
